<template>
    <div>
        <!-- 支付按钮，模拟支付操作 -->
        <van-button type="primary" @click="pay">支付</van-button>
        <el-button @click="a" type="success">支付</el-button>


        <img :src="text" />
        <el-dialog :title="paySucc?'支付成功':'扫码支付'" :visible.sync="dialogVisible" width="30%" center>
            <!-- 生成二维码图片 -->
            <vue-qr text="https://qr.alipay.com/bax02762bxh912advcqq00ab" :size="200" v-if="!paySucc"></vue-qr>
            <!-- 使用websocket监控是否扫描，扫描成功显示成功并退出界面 -->
            <span class="iconfont icon-success" style="position: relative;font-size: 100px;color:#42B983;margin-left: 50px;top:-10px;" v-else></span>
        </el-dialog>

    </div>

</template>

<script>
    import vueQr from 'vue-qr'
    export default {
        name: "TestMicrocode",
        data(){
            return{
                dialogVisible: false,
                /*https://qr.alipay.com\/bax04166n6yyb4nguwl1004c：*/
                text: "",
                paySucc: false
            }
        },
        components: {
            vueQr
        },

        methods:{
            //测试支付
            pay() {
                alert("111")
                this.dialogVisible = true;
                // let _this = this;
                // _this.paySucc = false;
                // _this.dialogVisible = true;
                // this.$http.get(this.HOST+"/payApp/aliPay").then(resp=>{
                //     console.log(resp.data)
                //     _this.text = resp.data.msg;
                //     _this.dialogVisible = true;
                // })




            },

            // a(){
            //     this.$http.get(this.HOST+"/test").then(resp=>{
            //         console.log(resp)
            //         this.text = resp.data.msg;
            //         this.dialogVisible = true;
            //     })
            // }



        }
    }
</script>

<style scoped>

</style>